/* 
  医生头像横向滑动组件
 */
<template>
  <transition name="fade">
    <div v-show="items.length > 0" class="doctor-nav-slide">
      <div class="doctor-nav-slide">
        <yd-flexbox class="doctor-nav-slide--top">
          <yd-flexbox-item>
            美容师
          </yd-flexbox-item>
          <yd-flexbox-item style="text-align:right;">
            <router-link to="/index">全部{{total}}位<yd-navbar-next-icon size="12px"></yd-navbar-next-icon> </router-link>
          </yd-flexbox-item>
        </yd-flexbox>
        <ul class="doctor-nav-slide-list">
          <li @click="handleItemClick(item)" v-for="item, i in items" class="doctor-nav-slide-item">
            <img class="doctor-nav-slide-item--head" v-lazy="item.image" alt="">
            <span class="doctor-nav-slide-item--text">{{item.text}}</span>
          </li>
        </ul>
      </div>
      <ul>

      </ul>
    </div>
  </transition>
  
</template>

<script>
export default {
  props: {
    items: {
      default: () => [],
    },
    total: {
      default: () => "--",
    },
  },
  methods: {
    handleItemClick(item) {
      this.$emit("itemClick", item);
    },
  },
};
</script>
<style lang="scss">
.doctor-nav-slide {
  padding: 0;
  background-color: #fff;

  .doctor-nav-slide--top {
    font-size: 14px;
    padding: 0.2rem 0.2rem;
    border-bottom: 1px solid #eee;
  }
  .doctor-nav-slide-list {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow-x: auto;
    padding: 0.2rem 0;
    .doctor-nav-slide-item {
      display: inline-block;
      background-color: #fefefe;
      padding: 0.2rem;
      width: 1.5rem;
      box-sizing: border-box;
      .doctor-nav-slide--top {
        padding: 0.2rem 0.2rem 0;
      }
      .doctor-nav-slide-item--head {
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        display: block;
        margin-bottom: 0.1rem;
      }
      .doctor-nav-slide-item--text {
        text-align: center;
        white-space: nowrap;
        font-size: 12px;
        display: block;
      }
    }
  }
}
</style>
